<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="jquery.tagsinput.css">
    <script src="jquery.tagsinput.js"></script>
</head>
<body>
<input  id="names" value=""/>
<button onclick="addOneTag()">增加一个标签</button>
<button onclick="removeOneTag()">删除一个标签</button>
<button onclick="simulationInit()">模拟初始化</button>
<button onclick="tagExists()">判断标签是否存在</button>
<button onclick="getValue()">获取值</button>
<input  id="ages" value=""/>
<button onclick="addOneTag2()">增加一个标签</button>
<button onclick="removeOneTag2()">删除一个标签</button>
<button onclick="simulationInit2()">模拟初始化</button>
<button onclick="tagExists2()">判断标签是否存在</button>
<button onclick="getValue2()">获取值</button>
</body>
<script>

    $(function () {
        $('#names').tagsInput({
            //'autocomplete_url': url_to_autocomplete_api,
            //'autocomplete': { option: value, option: value},
            'height':'100px',
            'width':'600px',
            'defaultText':'请输入...',           //默认提示文字
            //'onAddTag':callback_function,        //增加标签时执行回调函数
            //'onRemoveTag':callback_function,     //删除标签时执行回调函数
            //'onChange' : callback_function,      //标签变化时执行回调函数
            'minChars' : 2,
            'maxChars' : 10,    // if not provided there is no limit
            'placeholderColor' : '#666666'
        });
        $('#ages').tagsInput({
            //'autocomplete_url': url_to_autocomplete_api,
            //'autocomplete': { option: value, option: value},
            'height':'100px',
            'width':'600px',
            'defaultText':'请输入...',           //默认提示文字
            //'onAddTag':callback_function,        //增加标签时执行回调函数
            //'onRemoveTag':callback_function,     //删除标签时执行回调函数
            //'onChange' : callback_function,      //标签变化时执行回调函数
            'minChars' : 2,
            'maxChars' : 10,    // if not provided there is no limit
            'placeholderColor' : '#666666'
        });
    });

    function addOneTag() {
        $('#names').addTag('foo');
    }

    function removeOneTag() {
        $('#names').removeTag('foo');
    }
    
    function simulationInit() {
        // 赋值内容为空时, 相当于初始化为空
        $('#names').importTags('foo,bar,baz');
    }
    
    function tagExists() {
        alert($('#names').tagExist('foo'));
    }

    function getValue() {
        alert($('#names').val());
    }

    function addOneTag2() {
        $('#ages').addTag('foo');
    }

    function removeOneTag2() {
        $('#ages').removeTag('foo');
    }

    function simulationInit2() {
        // 赋值内容为空时, 相当于初始化为空
        $('#ages').importTags('foo,bar,baz');
    }

    function tagExists2() {
        alert($('#ages').tagExist('foo'));
    }

    function getValue2() {
        alert($('#ages').val());
    }

</script>
</html>